<template>
  <el-dialog
    :close-on-click-modal="false"
    width="45%"
    title="阶段列表"
    :visible.sync="innerVisible"
    :before-close="cancelAdd"
    append-to-body
  >
    <el-form
      class="edit-form"
      status-icon
      :model="datas"
      @keyup.enter.native="save"
      ref="innerEditForm"
    >
      <el-row :gutter="10">
        <el-col :span="23">
          <el-checkbox-group v-model="checkedDispose" @change="setCheckData">
            <el-checkbox
              v-for="(item,index) in datas.listData"
              :label="item.name"
              :key="index"
              :disabled="item.status==0?true:false"
            ></el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelAdd">取 消</el-button>
      <el-button :type="'primary'" @click.native="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import disposeAPI from "@apis/projectDispose";getList
import disposeAPI from "@apis/projectStage";
import { Message } from "element-ui";

export default {
  name: "InnerDialog",
  props: {
    innerSave: Function,
    baseStyle: Object
  },
  data() {
    return {
      innerVisible: false,
      checkedDispose: [],
      checkedIDs: [],
      datas: {
        name: "阶段列表",
        listData: []
      }
    };
  },
  computed: {},
  created() {
    this.getStageList();
  },
  methods: {
    // getStageList(id) {
    //   disposeAPI
    //     .getPLanList(id)
    //     .then(res => {
    //       this.datas.listData = [...res.list];
    //     })
    //     .catch(err => this.$message.error(err.message));
    // },
    getStageList() {
      disposeAPI
        .getList()
        .then(res => {
          // console.log(res,"res")
          this.datas.listData = [...res.list];
          // this.datas.listData = res.list.filter(item => item.status == 1);
        })
        .catch(err => this.$message.error(err.message));
    },
    openAddThings() {
      this.innerVisible = true;
    },
    cancelAdd() {
      this.innerVisible = false;
      this.$refs.innerEditForm.resetFields();
    },
    setCheckData(val, id) {
      // this.getStageList();
      this.checkedDispose = [...val];
      let newIds = [];
      val.map(item => {
        newIds.push(this.datas.listData.filter(val => item === val.name)[0]);
      });
      this.checkedIDs = [...newIds];
    },
    save() {
      // console.log(this.checkedIDs,"innereditEorm")
      this.$refs.innerEditForm.validate(valid => {
        if (valid) {
          this.$emit("innerSave", [...this.checkedIDs]);
          this.cancelAdd();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-form {
  height: 42vh;
  overflow-y: auto;
  overflow-x: hidden;
  li {
    cursor: pointer;
  }
}
</style>